<template>
	<view>
		<u-table>
			<u-tr>
				<u-th width="80rpx" style="flex:0">
					<view>
						<checkbox-group @change="checkAllChange"><checkbox :value="'all'" :checked="checkAll"></checkbox></checkbox-group>
					</view>
				</u-th>
				<u-th>产品型号</u-th>
				<u-th>颜色</u-th>
				<u-th>机身码</u-th>
			</u-tr>
			<checkbox-group @change="checkboxChange">
				<u-tr v-for="(item, index) in list" :key="item.id">
					<u-td width="80rpx" style="flex:0"><checkbox :checked="item.checked" :value="index"></checkbox></u-td>
					<u-td>{{ item.model }}</u-td>
					<u-td>{{ item.color }}</u-td>
					<u-td>{{ item.code }}</u-td>
				</u-tr>
			</checkbox-group>
		</u-table>
		<view class="bottomOpeCon">
			<view class="flex justify-around">
				<view>
					<u-button type="error" size="medium" :disabled="checkedListLength == 0" @click="delClick" >
						<text class="cuIcon-delete"></text>
						删除选定
					</u-button>
				</view>
				<view>
					<u-button type="success" size="medium" :disabled="checkedListLength == 0" @click="confirmClick">
						<text class="cuIcon-check"></text>
						{{ confirmText }}
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
	props: {
		confirmText: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			checkAll: false
		};
	},
	computed: {
		list() {
			return this.$store.state.storageOrder.sumList;
		},
		...mapGetters({
			checkedListLength: 'storageOrder/checkedListLength'
		})
	},
	methods: {
		...mapMutations({
			updateSumListCheck: 'storageOrder/updateSumListCheck',
			dropSumListItem: 'storageOrder/dropSumListItem'
		}),
		checkAllChange(e) {
			console.log(e);
			let indexArr = [];
			if (e.detail.value.length > 0) {
				indexArr = Array.from({ length: this.list.length }).map((v, k) => `${k}`);
			}
			this.updateSumListCheck(indexArr);
		},
		checkboxChange(e) {
			console.log(e);
			this.updateSumListCheck(e.detail.value);
		},
		delClick() {
			this.$confirm('提示', '确定删除？', () => {
				this.dropSumListItem();
				this.checkAll = false;
			});
		},
		confirmClick() {
			this.$emit('confirm-click');
		}
	}
};
</script>

<style lang="less">
.bottomOpeCon {
	height: 94rpx;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 12rpx;
}
</style>
